<template>
  <div class="p-4">
    <el-page-header @back="goBack" content="商品审核" />
    <el-card class="mb-4">
      <template #header>
        <div class="flex justify-between items-center">
          <span>商品信息</span>
          <el-tag :type="productInfo.status === 'approved' ? 'success' : productInfo.status === 'pending' ? 'warning' : 'danger'">
            {{ statusMap[productInfo.status] || '未知' }}
          </el-tag>
        </div>
      </template>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <p class="text-sm text-gray-500 mb-1">商品名称</p>
          <p>{{ productInfo.name }}</p>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-1">创建时间</p>
          <p>{{ productInfo.createTime }}</p>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-1">分类</p>
          <p>{{ productInfo.categoryName }}</p>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-1">价格</p>
          <p>¥{{ productInfo.price.toFixed(2) }}</p>
        </div>
        <div class="md:col-span-2">
          <p class="text-sm text-gray-500 mb-1">商品描述</p>
          <p>{{ productInfo.description }}</p>
        </div>
      </div>
      <div class="mt-4">
        <p class="text-sm text-gray-500 mb-2">商品图片</p>
        <div class="flex flex-wrap gap-2">
          <el-image
            v-for="(img, index) in productInfo.images"
            :key="index"
            :src="img.url || img"
            :preview-src-list="productInfo.images.map(i => i.url || i)"
            class="w-24 h-24 object-cover rounded"
            fit="cover"
          />
        </div>
      </div>
    </el-card>

    <el-card class="mb-4">
      <template #header>
        <span>卖家信息</span>
      </template>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
          <p class="text-sm text-gray-500 mb-1">卖家用户名</p>
          <p>{{ sellerInfo.username }}</p>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-1">注册时间</p>
          <p>{{ sellerInfo.registerTime }}</p>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-1">邮箱</p>
          <p>{{ sellerInfo.email }}</p>
        </div>
        <div>
          <p class="text-sm text-gray-500 mb-1">电话</p>
          <p>{{ sellerInfo.phone }}</p>
        </div>
      </div>
    </el-card>

    <el-card>
      <template #header>
        <span>审核历史</span>
      </template>
      <el-timeline>
        <el-timeline-item
          v-for="item in auditHistory"
          :key="item.id"
          :timestamp="item.time"
          :type="item.status === 'approved' ? 'success' : item.status === 'rejected' ? 'danger' : 'info'"
        >
          <el-card>
            <div class="flex justify-between items-center mb-2">
              <span class="font-medium">{{ item.operator }}</span>
              <el-tag :type="item.status === 'approved' ? 'success' : item.status === 'rejected' ? 'danger' : 'info'">
                {{ statusMap[item.status] || '未知' }}
              </el-tag>
            </div>
            <p class="text-gray-600">{{ item.comment || '无审核意见' }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <div class="flex justify-end mt-4">
      <el-button v-if="productInfo.status === 'pending'" @click="handleApprove" type="primary">通过</el-button>
      <el-button v-if="productInfo.status === 'pending'" @click="handleReject" type="danger" class="ml-2">拒绝</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const route = useRoute()

const productInfo = ref({
  id: 1,
  name: '无线蓝牙耳机',
  categoryId: 1,
  categoryName: '电子数码',
  price: 299.99,
  stock: 100,
  status: 'pending',
  description: '高品质无线蓝牙耳机，降噪功能，续航24小时',
  images: [{ url: 'https://picsum.photos/seed/headphone/200/200' }],
  createTime: '2023-09-01 10:30:00'
})

const sellerInfo = ref({
  id: 1001,
  username: 'seller123',
  email: 'seller@example.com',
  phone: '13900139000',
  registerTime: '2023-01-01 10:00:00'
})

const auditHistory = ref([
  {
    id: 1,
    operator: '系统管理员',
    status: 'pending',
    time: '2023-09-01 10:30:00',
    comment: '等待审核'
  }
])

const statusMap = {
  approved: '已通过',
  rejected: '已拒绝',
  pending: '待审核'
}

const goBack = () => {
  router.push({ name: 'product-list' }) // 假设存在商品列表路由
}

const fetchProductInfo = async () => {
  try {
    // 模拟API请求
    // const { data } = await axios.get(`/api/products/${route.params.id}`)
    // productInfo.value = data.product
    // sellerInfo.value = data.seller
    // auditHistory.value = data.auditHistory
  } catch (error) {
    ElMessage.error('获取商品信息失败')
  }
}

const handleApprove = async () => {
  try {
    ElMessageBox.prompt('请输入审核意见', '通过审核', {
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }).then(async ({ value }) => {
      // 模拟API请求
      // await axios.post(`/api/products/${productInfo.value.id}/approve`, { comment: value })
      ElMessage.success('审核通过成功')
      productInfo.value.status = 'approved'
      auditHistory.value.unshift({
        id: Date.now(),
        operator: '当前管理员',
        status: 'approved',
        time: new Date().toLocaleString(),
        comment: value
      })
    }).catch(() => {
      // 用户取消操作
    })
  } catch (error) {
    ElMessage.error('审核通过失败')
  }
}

const handleReject = async () => {
  try {
    ElMessageBox.prompt('请输入拒绝原因', '拒绝审核', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputErrorMessage: '拒绝原因不能为空'
    }).then(async ({ value }) => {
      if (!value) throw new Error('拒绝原因不能为空')
      // 模拟API请求
      // await axios.post(`/api/products/${productInfo.value.id}/reject`, { comment: value })
      ElMessage.success('审核拒绝成功')
      productInfo.value.status = 'rejected'
      auditHistory.value.unshift({
        id: Date.now(),
        operator: '当前管理员',
        status: 'rejected',
        time: new Date().toLocaleString(),
        comment: value
      })
    }).catch((err) => {
      if (err !== 'cancel') {
        ElMessage.error(err.message || '拒绝原因不能为空')
      }
    })
  } catch (error) {
    ElMessage.error('审核拒绝失败')
  }
}

onMounted(() => {
  fetchProductInfo()
})
</script>

<style scoped>
/* 自定义样式 */
</style>